<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="favicon.ico" type="image/x-icon"/> 
  <link rel="stylesheet" href="examples-styles.css"/>

  <title>abcjs: Basic Demo</title>

  <link rel="stylesheet" type="text/css" href="../abcjs-audio.css">
  <script src="../dist/abcjs-basic.js" type="text/javascript"></script>
  <style>
    #audio {
      margin-top: 20px;
      max-width: 760px;
    }
  </style>
  <script type="text/javascript">
    var abc = "T: Cooley's\n" +
      "M: 4/4\n" +
      "L: 1/8\n" +
      "R: reel\n" +
      "K: Emin\n" +
      "|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" +
      "EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" +
      "|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" +
      "eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";

    function load() {

      var showPlayer = document.querySelector('#show-player');
      var transposeHalfSteps = document.querySelector(".transpose-half-steps");
      var transposeVisual = document.querySelector(".transpose-visual");
      var transposeAudio = document.querySelector(".transpose-audio");
      var visualObj = ABCJS.renderAbc("paper", abc);
      var createSynth;
      var synthControl;

      // Initialize sound buffer and playback widget on a user gesture because of browser constraints on AudioContexts.
      showPlayer.addEventListener('click', () => {

        if (ABCJS.synth.supportsAudio()){
          createSynth = new ABCJS.synth.CreateSynth();  // sound buffer
          synthControl = new ABCJS.synth.SynthController();  // widget

          // preloads and caches the notes to be played
          createSynth.init({ visualObj: visualObj[0] }).then(function() {
            redraw();
          });

          // creates playback widget with no visual cursor
          var cursorControl = null;
          synthControl.load('#audio', cursorControl, {
            displayRestart: true,
            displayPlay: true,
            displayProgress: true,
          });
        }
        else {
          document.querySelector('#audio').innerHTML = 'Audio is not supported in this browser.'
        }

        showPlayer.style.display = 'none';
      });
		function redraw() {

          var transposeBy = transposeHalfSteps.value;
          var doVisual = transposeVisual.checked ? transposeBy : 0;
          var doAudio = transposeAudio.checked ? transposeBy : 0;
          // re-render visualObj
          visualObj = ABCJS.renderAbc("paper", abc, {
          	visualTranspose: doVisual
          });
          if(createSynth && synthControl) {
          	// re-set tune stored in SynthController
          	synthControl.setTune(visualObj[0], true, { midiTranspose: doAudio })
          		.then(function(){
          			console.log('Audio successfully loaded.')
          		}).catch(function(error) {
          		console.warn('Audio problem: ', error);
          	});
          }
		}

    transposeHalfSteps.addEventListener("change", function() {
        redraw();
    });
    transposeVisual.addEventListener("change", function() {
	  redraw();
	});
    transposeAudio.addEventListener("change", function() {
      redraw();
    });
  }

</script>
</head>
<body onload="load()">
  <header>
    <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo">
    <h1>Basic Transposition</h1>
  </header>
  <div class="container">
    <p>This transposes either/both the visual music and the synth.</p>
    <label>Transpose half-steps: <input class="transpose-half-steps" type="number" min="-24" max="24" step="1" value="0"></label>
    <label><input type="checkbox" class="transpose-visual" checked>Visual?</label>
    <label><input type="checkbox" class="transpose-audio" checked>Audio?</label>
    <button id="show-player">Show Audio Player</button>
    <div id="audio"></div>
    <div id="warnings"></div>
    <div id="paper"></div>
  </div>
</body>
</html>
